<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="600px" @close="handleClose" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
            <!-- 字典编码 -->
            <el-form-item label="字典类型" prop="dictType">
                <el-select v-model="form.dictType" placeholder="请选择字典类型">
                    <el-option v-for="item in dictTypeList" :key="item.dictType" :label="item.dictName"
                        :value="item.dictType" />
                </el-select>
            </el-form-item>
            <el-form-item label="字典标签" prop="dictLabel">
                <el-input v-model="form.dictLabel" placeholder="请输入字典标签" />
            </el-form-item>
            <el-form-item label="字典键值" prop="dictValue">
                <el-input v-model="form.dictValue" placeholder="请输入字典键值" />
            </el-form-item>
            <el-form-item label="字典排序" prop="dictSort">
                <el-input-number v-model="form.dictSort" :min="0" :step="1" />
            </el-form-item>
            <el-form-item label="是否默认" prop="isDefault">
                <el-radio-group v-model="form.isDefault">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="样式属性" prop="cssClass">
                <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
            </el-form-item>
            <el-form-item label="表格回显样式" prop="listClass">
                <el-input v-model="form.listClass" placeholder="请输入表格回显样式" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { dictDataAdd, dictDataEdit } from './api/dictionaryData'
import { dictTypeList } from '../dictionaryType/api/dictionaryType'
export default {
    name: 'DictDataAddOrEdit',
    data() {
        return {
            visible: false,
            submitLoading: false,
            isEdit: false,
            dictTypeList: [],
            form: {
                dictType: '',
                dictLabel: '',
                dictValue: '',
                dictSort: 0,
                isDefault: 'N',
                cssClass: '',
                listClass: '',
                remark: ''
            },
            rules: {
                dictType: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
                dictLabel: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
                dictValue: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
                dictSort: [{ type: 'number', required: true, message: '请输入排序', trigger: 'change' }],
            }
        }
    },
    computed: {
        dialogTitle() {
            return this.isEdit ? '编辑字典数据' : '新增字典数据'
        }
    },
    methods: {
        getDictTypeList() {
            dictTypeList().then(res => {
                this.dictTypeList = res || []
            })
        },
        openAdd(preset = {}) {
            this.isEdit = false
            this.resetForm()
            Object.assign(this.form, preset)
            this.visible = true
            this.getDictTypeList()
        },
        openEdit(row) {
            this.isEdit = true
            this.form = { ...row }
            this.visible = true
            this.getDictTypeList()
        },
        resetForm() {
            this.form = {
                dictType: '',
                dictLabel: '',
                dictValue: '',
                dictSort: 0,
                isDefault: 'N',
                cssClass: '',
                listClass: '',
                remark: ''
            }
            this.$nextTick(() => {
                this.$refs.form && this.$refs.form.clearValidate()
            })
        },
        handleSubmit() {
            this.$refs.form.validate(async valid => {
                if (!valid) return
                this.submitLoading = true
                try {
                    const api = this.isEdit ? dictDataEdit : dictDataAdd
                    await api(this.form)
                    this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
                    this.handleClose()
                    this.$emit('refresh')
                } finally {
                    this.submitLoading = false
                }
            })
        },
        handleClose() {
            this.visible = false
            this.resetForm()
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    text-align: right;
}
</style>
